<template>
  <el-dialog
      v-model="showDialog"
      title="选择等级权益"
      width="1100px"
      @opened="handleOpened"
      append-to-body
      :close-on-click-modal="false"
  >
    <search-bar inline>
      <template #normal>
        <el-form-item label="商品名称">
          <el-input v-model="selectForm.name" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <goods-supplier-filter
            url="merchant/member/goods/getStore"
            @change="({selected}) => selectForm.storeId = selected">
        </goods-supplier-filter>
      </template>
    </search-bar>

    <layout-table
        ref="goodsTableRef"
        :url="props.tableUrl"
        :param="selectForm"
        row-key="id">
      <el-table-column type="selection" reserve-selection></el-table-column>
      <el-table-column label="商品图片" width="110">
        <template #default="scope">
          <div style="width: 100px;height: 100px" class="flex-center">
            <el-image style="max-width: 100px;max-height: 100px" :src="scope.row.thumbnailUrl"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template #default="scope">
          <div class="goods-name">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column label="规格名称" width="200">
        <template #default="scope">
          {{ scope.row.products?.[0]?.name }}
        </template>
      </el-table-column>
      <el-table-column label="剩余库存" width="200">
        <template #default="scope">
          {{ scope.row.stock}}
        </template>
      </el-table-column>
    </layout-table>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElTable} from 'element-plus'
import {IStoreGoodsPageRow} from "@/api/modules/pointsMall";
import {useGetGoodsType} from "@/components/goodsCenter/compositions/useGetGoodsType";
import {addRankBenefits} from "@/api/vipCenter";
import {IRankBenefitItem} from "@/api/modules/vipCenter";

const props = defineProps<{
  show: boolean,
  tableUrl: string,
  selectedRank: IRankBenefitItem
}>()

const emits = defineEmits(['update:show', 'confirm', 'cancel'])

const store = useStore()
const router = useRouter()

const showDialog = computed({
  get() {
    return props.show
  },
  set(val) {
    return emits("update:show", val)
  }
})

const goodsTableRef = ref<InstanceType<typeof ElTable>>()
const selectForm = reactive({
  withProducts: true,
  name: '',
  storeId: null
})

const handleConfirm = async () => {
  if (!props.selectedRank?.id) {
    ElMessage.error('请先从左侧列表中选择或创建一个会员等级')
    return
  }

  const innerTable = goodsTableRef.value?.$refs.elTable as InstanceType<typeof ElTable>
  const selectedRows = innerTable.getSelectionRows()
  const form = {
    memberEquityEntities: []
  }
  form.memberEquityEntities = selectedRows.map((item: IStoreGoodsPageRow) => ({goodsId: item.id, memberId: props.selectedRank.id}))
  const rs = await addRankBenefits(form)

  if (rs.code === 200) {
    ElMessage.success('添加成功')
    showDialog.value = false
    emits('confirm', rs)
  }
}

const handleCancel = () => {
  showDialog.value = false
}

const handleOpened = () => {

}

const handleClosed = () => {
  const innerTable = goodsTableRef.value?.$refs.elTable as InstanceType<typeof ElTable>
  innerTable.clearSelection()
}
</script>

<style scoped lang="scss">
.goods-content {
  padding: 5px 0;

  .goods-name {
    margin-bottom: 10px;
  }

  .goods-info {
    display: flex;

    > div {
      width: 200px;
      margin-right: 20px;
    }
  }

  .highlight {
    color: var(--el-color-warning-dark-2)
  }
}

.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;

  .left {
    display: flex;
    align-items: center;

    .block {
      padding: 0 10px;
    }
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
